<template>
	<div class="header">
		<div class="header-top">
			<div class="header-left">
				<img src="@/assets/img/logo.png" class="logo"/>
				
				<div class="right-box" v-if='token'>
					<el-dropdown size="medium" @command="handlePublish">
					  <div class="el-dropdown-link publish">发布</div>
					  <el-dropdown-menu slot="dropdown">
					    <el-dropdown-item command='model'>模型</el-dropdown-item>
					    <el-dropdown-item command='image'>图片</el-dropdown-item>
					  </el-dropdown-menu>
					</el-dropdown>
					
					<el-dropdown size="medium" @command="handleItem">
					  <span class="el-dropdown-link">
					    <img :src='staticURL+userInfo?.headimg' v-if='userInfo?.headimg' class='bg_logo'/>
					    <img src="@/assets/img/user-logo.png" class='bg_logo' v-else/>
					  </span>
					  <el-dropdown-menu slot="dropdown">
					    <el-dropdown-item command='model'>我的模型</el-dropdown-item>
					    <el-dropdown-item command='work'>我的作品</el-dropdown-item>
					    <el-dropdown-item command='out'>退出登录</el-dropdown-item>
					  </el-dropdown-menu>
					</el-dropdown>
				</div>
				<!-- <div>{{schoolName}}<span>3D模型空间</span></div> -->
				<div class="header-right" v-else>
					<!-- <span class="publish" @click="publish">发布</span> -->
					<span @click="login">登录</span>
					<span @click="register">注册</span>
				</div>
			</div>
			
			
		</div>
		<publish-img v-if="isShowUserInfo" @close="close"></publish-img>
		<!-- <img class="header-img" src="@/assets/img/header_bg.png"/> -->
		
	</div>
</template>
<script>
	import utils from '@/assets/js/utils';
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		loginOut
	} from '@/api/common.js';
	import PublishImg from './publishImg';
	export default {
		components:{
			PublishImg
		},
		data() {
			return {
				token:"",
				schoolName:"",
				headimg:"",
				isShowUserInfo:false
			};
		},

		computed: {
			...mapState(['userInfo'])
		},

		created() {
			this.token = utils.getSession('token');
			this.schoolName = this.token && utils.getSession('schoolName') ? utils.getSession('schoolName') : '';
		},

		methods: {
			publish(){
				this.$router.push({
					path: "/create-model"
				})
			},
			
			login(){
				this.$router.push({
					path: "/login"
				})
			},
			
			register(){
				this.$router.push({
					path: "/register"
				})
			},
			
			async loginOut(){
				const {
					data,
					status
				} = await loginOut({});
				if(data.code == 200){
					this.$message.success('退出成功');
				}
				utils.removeSession('token');
				utils.removeSession('userType');
				utils.removeSession('schoolName');
				utils.removeSession('realname');
				utils.removeSession('headimg');
				utils.removeSession('createTime');
				this.$router.push('/login');	
			},
			handleItem(val){
				if(val == "out"){
					this.loginOut()
				}
				else{
					this.$router.push('/my-work')
				}
			},
			handlePublish(val){
				if(val == "image"){
					this.$router.push('/create-img-model');
				}
				else if(val == "model"){
					this.$router.push('/create-model');
				}
			},
			close(){
				this.isShowUserInfo = false
			}
		}
	};
</script>
<style lang="scss" scoped>
	.header {
		width: 100%;
		background: #FFF1DF;
		.header-top{
			@include flex-row;
			justify-content: space-between;
			.header-left {
				padding: 10px 40px;
				flex: 1;
				@include flex-row;
				justify-content: space-between;
				.logo{
					width: 223px;
					height: 47px;
				}
				.bg_logo{
					display: block;
					width: 50px;
					height: 50px;
					border-radius: 50%;
					cursor: pointer;
				}
				.right-box{
					@include flex-row;
					align-items: center;
					.publish{
						cursor: pointer;
						margin-right: 20px;
						font-size: 20px;
						color: #FF8A00;
					}
				}
			}
			
			.header-right {
				@include flex-row;
				@include cursor-style;
				span{
					width: 100px;
					height: 36px;
					font-size: 14px;
					line-height: 36px;
					text-align: center;
					background: #FFFFFF;
					border-radius: 5px 5px 5px 5px;
					border: 1px solid #FF8A00;
					color: #FF8A00;
					margin-left: 20px;;
				}
				.publish{
					margin-right: 10px;
					background: #FF8A00;
					border-radius: 5px 5px 5px 5px;
					color: #FFFFFF;
					border: none;
				}
			}
		}
		
		
		.header-img {
			display: block;
			margin-top: 25px;
			width: 100%;
			height: 100px;
		}
	}
	:deep(.el-dropdown-menu__item){
		font-size: 16px;
		line-height: 36px;
		padding: 10px 25px;
	}
</style>